<template>
	<view class="notice">
		<scroll-view class="notice-scroll" :scroll-y="true" :scroll-with-animation="true" :scroll-top="scrollTop">
			<view :animation="animationData" class="notice-content flex">
				<view class="notice-item flex" v-for="(item, index) in noticeList" :key="index"
					@tap="handleClickNotice(item)">
					<view class="flex alignC" style="width: 65%;">
						<image src="/static/notice.png" mode=""></image>
						<text class="title">{{ item.title }}</text>
					</view>
					<view class="flex alignC">
						<!-- <text style="padding-right: 10rpx;">{{ item.createTime | filterTime }}</text> -->
						<u-icon name="arrow-right" color="#F9AE3D" size="24"></u-icon>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "notice-bar",
		data() {
			return {
				noticeList: [], // 通知列表
				animation: null, // 动画对象
				animationData: {},
				timer: null, // 定时器
				interval: 2000, // 滚动时间间隔
				scrollTop: 0, // 滚动距离
				currentIndex: 0, // 当前通知索引
			};
		},
		filters: {
			filterTime(time) {
				let date = time.split(' ')[0]
				return date
			}
		},
		props: ['notices'],
		mounted() {
			this.initNoticeList();
			const _this = this;
			_this.animation = uni.createAnimation({
				duration: 500,
				timingFunction: "ease-out",
			});
		},
		created() {
			console.log(this.notices, 'noticesnoticesnotices')
		},
		methods: {
			// 初始化通知列表
			initNoticeList() {
				const _this = this;
				_this.noticeList = _this.notices;
				console.log('通知公告', _this.notices)
				if (_this.noticeList.length > 1) {
					_this.timer = setInterval(() => {
						_this.handleScrollNotice();
					}, _this.interval);
				}
			},
			// 点击通知时触发
			handleClickNotice(item) {
				console.log(item)
				this.$emit("click", item);
				uni.navigateTo({
					url: `/subPackages/articleDetail/articleDetail?item=${encodeURIComponent(JSON.stringify(item))}&title=通知公告`
				})
			},
			// 滚动通知
			handleScrollNotice() {
				const len = this.noticeList.length;
				if (this.currentIndex === len - 1) {
					this.currentIndex = 0;
				} else {
					this.currentIndex++;
				}
				this.animateScroll();
			},
			// 动画滚动
			animateScroll() {
				const _this = this;
				const noticeHeight = 22; // 通知高度，根据实际情况调整
				const scrollTop = _this.currentIndex * noticeHeight;
				_this.scrollTop = scrollTop;
				if (scrollTop === 0) {
					_this.animation.translateY(-scrollTop).step({
						duration: 0,
					});
				} else {
					_this.animation.translateY(-scrollTop).step();
				}
				_this.animationData = _this.animation.export();
			},
		},
		destroyed() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			if (this.animation) {
				this.animation = null;
			}
		},
	};
</script>

<style scoped lang="scss">
	.notice {
		/* 组件高度，根据实际情况调整 */
		overflow: hidden;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.notice-scroll {
		width: 100%;
		height: 88rpx;
		display: flex;
	}

	.notice-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #FDF6EC;
		color: #F9AE3D;
		font-size: 28rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			padding-right: 20rpx;
		}

		.title {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.notice-item {
		/* 通知高度，根据实际情况调整 */
		height: 88rpx;
		/* 通知行高，根据实际情况调整 */
		line-height: 88rpx;
		padding: 0 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		justify-content: space-between;
	}
</style>